<template>
<view id="wai">
	<view class="content">
		<h3>选择你感兴趣的知识</h3>
		<p>至少选择一个可随时调整</p>
		<dl v-for="(item,index) in list" :key="index">
			
			
				<dt><image :src='item.url'></image>{{item.dtt}}</dt>

			<dd v-for="(idd,index1) in item.ddd" :key="index1"><button class="xbtn" type="default" size="mini" plain="true" @click="xuan(index,index1)" :class="{'selectedColor' :idd.checked==true}">{{idd.name}}</button></dd>
		</dl>
		
	</view>
	<view class="cont">
	<button class="btn">选好了</button>		
		
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					url: '../../static/img/yuandian1%20(1).png',
					dtt: '热门推荐',
					ddd: [{
					name:'人工智能',
					checked:false,
					}, {
					name:'办公软件',
					checked:false,
					}, {
					name:'投资理财',
					checked:false,
					}]
				}, {
					url: '../../static/img/yuandian1.png',
					dtt: 'IT互联网',
					ddd: [{
					name:'移动开发',
					checked:false,
					}, {
					name:'前端开发',
					checked:false,
					}, {
					name:'人工智能',
					checked:false,
					}, {
					name:'大数据',
					checked:false,
					}, {
					name:'测试运维',
					checked:false,
					}, {
					name:'信息安全',
					checked:false,
					}, {
					name:'用户体验',
					checked:false,
					}, {
					name:'产品运营',
					checked:false,
					}, {
					name:'产品策划',
					checked:false,
					}, {
					name:'Python',
					checked:false,
					}, {
					name:'Java',
					checked:false,
					}]
				}, {
					url: '../../static/img/yuandian1%20(2).png',
					dtt: '职场技能',
					ddd: [{
					name:'办公软件',
					checked:false,
					}, {
					name:'求职应聘',
					checked:false,
					}, {
					name:'人工智能',
					checked:false,
					}, {
					name:'实用英语',
					checked:false,
					}, {
					name:'设计软件',
					checked:false,
					}, {
					name:'交互设计',
					checked:false,
					}, {
					name:'平面设计',
					checked:false,
					}, {
					name:'市场营销',
					checked:false,
					}, {
					name:'UI设计',
					checked:false,
					}, {
					name:'人际沟通',
					checked:false,
					}]
				}, {
					url: '../../static/img/yuandian1%20(3).png',
					dtt: '生活爱好',
					ddd: [{
					name:'摄影基础',
					checked:false,
					}, {
					name:'影视基础',
					checked:false,
					}, {
					name:'绘画',
					checked:false,
					}, {
					name:'书法',
					checked:false,
					}, {
					name:'投资理财',
					checked:false,
					}, {
					name:'设计软件',
					checked:false,
					}, {
					name:'两性',
					checked:false,
					}, {
					name:'心理学',
					checked:false,
					}]
				}]
			}
		},
		onLoad() {},
		methods: {
			xuan(index,index1) {
				if(this.list[index].ddd[index1].checked==false){
					console.log(this.list[index].ddd[index1].name);
					this.list[index].ddd[index1].checked=true;
				}else{
					this.list[index].ddd[index1].checked=false;
				}
			}
		}
	}
</script>

<style>
	image{
		width: 25px;
		height: 25px;
		vertical-align: middle;
	}
	.cont{
            position: fixed;
			bottom: 5px;
			width: 100%;		
			text-align: center;
        }
	.btn {
		background-color: #33b17b;
		width: 200px;
		z-index: 99;
		color: #FFFFFF;
		border-radius: 20px 20px 20px 20px;
	        }
	dl {
		margin-left: 1%;
	}
	.selectedColor{
		background-color: #33b17b !important;
		color: #FFFFFF !important;
	}
	dt {
		padding: 0 auto;
	}
	dt:not(first) {
		padding-top: 5%;
		border-top: 1px solid #f2f2f2;
	}
	.xbtn{
		border: 1px solid #f3f4f6 !important;
		color: #99a4bd;
		border-radius: 20px 20px 20px 20px;
	}
	dd {
		display: inline-block;
		margin: 5% 2% 2% 6%;
	}
	h3{
		text-align: center;
	}
	p {
		color: #78839b;
		text-align: center;
	}
	.content {
		height: 2100upx;
		margin-top: 40upx;
		margin-bottom: 50upx;
	}
</style>
